<template>
    <el-text type="primary" size="large">6,添加在父容器上的语法 display:flex; align-conten 行与行之间的对齐方式 注：要两行即两行以上</el-text>
    <div class="content_box">
        <div class="child_content_box">
            <el-text>:flex-start 开始位置为对齐方式</el-text>
            <div class="align_content_start">
                <div class="child_before_box">1</div>
                <div class="child_before_box">2</div>
                <div class="child_before_box">3</div>
                <div class="child_before_box">4</div>
                <div class="child_before_box">5</div>
                <div class="child_before_box">6</div>
            </div>
        </div>
        <div class="child_content_box">
            <el-text>:center 居中对齐</el-text>
            <div class="align_content_center">
                <div class="child_before_box">1</div>
                <div class="child_before_box">2</div>
                <div class="child_before_box">3</div>
                <div class="child_before_box">4</div>
                <div class="child_before_box">5</div>
                <div class="child_before_box">6</div>
            </div>
        </div>
        <div class="child_content_box">
            <el-text>:flex-end 底部对齐</el-text>
            <div class="align_content_flex_end">
                <div class="child_before_box">1</div>
                <div class="child_before_box">2</div>
                <div class="child_before_box">3</div>
                <div class="child_before_box">4</div>
                <div class="child_before_box">5</div>
                <div class="child_before_box">6</div>
            </div>
        </div>
        <div class="child_content_box">
            <el-text>:space-between;两端对齐</el-text>
            <div class="align_content_between">
                <div class="child_before_box">1</div>
                <div class="child_before_box">2</div>
                <div class="child_before_box">3</div>
                <div class="child_before_box">4</div>
                <div class="child_before_box">5</div>
                <div class="child_before_box">6</div>
            </div>
        </div>
        <div class="child_content_box">
            <el-text>:space-around;均分对齐</el-text>
            <div class="align_content_around">
                <div class="child_before_box">1</div>
                <div class="child_before_box">2</div>
                <div class="child_before_box">3</div>
                <div class="child_before_box">4</div>
                <div class="child_before_box">5</div>
                <div class="child_before_box">6</div>
            </div>
        </div>
    </div>
</template>
<script setup >

</script>
<style scoped lang="scss">
.content_box {
    display: flex;
    flex-wrap: wrap;
}

.child_content_box {
    margin: 5px;
}

.align_content_start {
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
}
.align_content_center{
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.align_content_flex_end{
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}
.align_content_between{
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.align_content_around {
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

.child_before_box {
    width: 40px;
    height: 40px;
    margin: 2px;
    background-color: red;
}

.child_before_box:nth-child(2) {
    background-color: #F56C6C;
}

.child_before_box:nth-child(3) {
    background-color: yellow;
}

.child_before_box:nth-child(4) {
    background-color: green;
}

.child_before_box:nth-child(5) {
    background-color: rgb(51, 238, 244);
}

.child_before_box:nth-child(6) {
    background-color: rgba(219, 117, 205, 0.572);
}
</style>